import DownArrow from '../../assets/images/down-arrow.svg';
import './index.scss';
const Fade = require('react-reveal/Fade');

interface IProps {
  title?: string;
  description?: string;
  backgroundImage?: string;
  leftBtnText?: string;
  rightBtnText?: string;
}

const Section: React.FC<IProps> = ({
  title,
  description,
  backgroundImage,
  leftBtnText,
  rightBtnText,
}) => {
  return (
    <div className="wrap" style={{backgroundImage: `url(${backgroundImage})`}}>
      <Fade bottom>
        <div className="item-text">
          <h1>{title}</h1>
          <p>{description}</p>
        </div>
      </Fade>

      <div className="buttons">
        <Fade bottom>
          <div className="button-group">
            <div className="left-button">{leftBtnText}</div>
            <div className="right-button">{rightBtnText}</div>
          </div>
        </Fade>

        <img src={DownArrow} alt="" className="down-arrow" />
      </div>
    </div>
  );
};

export default Section;
